import React, { useMemo, useRef, memo } from 'react';
import { useDraggable } from '@dnd-kit/core';
import Draggable from './Draggable'
import { CSS } from '@dnd-kit/utilities';
import styles from './index.less'

function DraggableItem({
    children,
    style,
    id,
    drag = false,
    percent
}) {
    const {
        attributes,
        isDragging,
        listeners,
        setNodeRef,
        transform,
    } = useDraggable({
        id
    });

    return (
        <Draggable
            ref={setNodeRef}
            dragging={isDragging}
            listeners={listeners}
            style={{ ...style }}
            transform={drag === false ? {} : transform}
            percent={percent}
            drag={drag}
            {...attributes}
        >
            {children}
        </Draggable>
    );
}

export default DraggableItem